<?php
use yii\helpers\Html;
use yii\helpers\Url;
use yii\bootstrap\ActiveForm;
use yii\helpers\ArrayHelper;

$this->title = 'create';
?>
<link href="plugins/scs.min.css" rel="stylesheet" />
<link href="plugins/time.css" rel="stylesheet" />
<style>
	.add_department .box-footer{text-align:center;border-top:0;}
	.add_department .box-footer button{width:200px;}
</style>
<section class="content">
	<div class="row">
		<div class="col-xs-12">
			<div class="box-header"><h2 class="box-title"><?php if ($model->id){?>客户详情<?php } else {?>新建客户<?php }?></h2></div>
			<div class="box-body add_department">
				<?php $form = ActiveForm::begin(['action' => ['customer/create', 'id' => $model->id], 'method' => 'post']);?>
					<div class="box-body">
						<div class="form-group">
							<label for="deparment_uname">客户名称</label>
							<?=Html::textInput('username', $model->username, ['class' => 'form-control', 'placeholder' => '请输入客户名称']);?>
							<?=Html::error($model, 'username', ['style' => 'color:red'])?>
						</div>
						<div class="form-group">
							<label>客户性别</label>
							<?=Html::radioList('sex', $model->sex, ['M'=>'男', 'F' => '女'],['class'=>'form-control']);?>
							<?=Html::error($model, 'sex', ['style' => 'color:red'])?>
						</div>
						<div class="form-group">
							<label>客户电话</label>
							<?=Html::textInput('mobileNumber', $model->mobileNumber, ['class' => 'form-control', 'placeholder' => '请输入客户电话']);?>
							<?=Html::error($model, 'mobileNumber', ['style' => 'color:red'])?>
						</div>
			            <div class="form-group">
			              <label>客户生日:</label>
			              <div class="input-group date">
			                <div class="input-group-addon">
			                  <i class="fa fa-calendar"></i>
			                </div>
			                <?=Html::textInput('birthday', $model->birthday ? date('Y-m-d', $model->birthday) : '', ['class' => 'form-control pull-right', 'id' => 'datepicker', 'readonly' => true]);?>
			                <?=Html::error($model, 'birthday', ['style' => 'color:red'])?>
			              </div>
			              <!-- /.input group -->
			            </div>
			            <div class="form-group">
			            	<label for="staff_city">客户归属地:</label>
			            	<?=Html::textInput('home', $model->home, ['class'=>'form-control', 'rows'=>'3', "id" => "myAddrs", 'readonly' => true, 'data-key' => '4-84-1298']);?>
			            </div>
						<div class="form-group">
							<label>客户住址</label>
							<?=Html::textarea('address', $model->address, ['class' => 'form-control', 'placeholder' => '请输入客户地址']);?>
							<?=Html::error($model, 'address', ['style' => 'color:red'])?>
						</div>	
					</div>
					<div class="box-footer">
						<button type="submit" class="btn btn-primary">确定</button>
					</div>
				<?php ActiveForm::end();?>
			</div>
		</div>
	</div>
</section>

<script src="js/jquery.js"></script>
<script type="text/javascript" src="plugins/date.js" ></script>
<script type="text/javascript" src="plugins/iscroll.js" ></script>
<script src="plugins/jquery.scs.min.js"></script>
<script src="plugins/CNAddrArr.min.js"></script>
<script src="plugins/datepicker/bootstrap-datepicker.js"></script>

<script>
  $('#datepicker').datepicker({
    autoclose: true
  });

  /*地址选择*/
  $(function() {
    function getAddrsArrayById(id) {
      var results = [];
      if (addr_arr[id] != undefined)
        addr_arr[id].forEach(function(subArr) {
          results.push({
            key: subArr[0],
            val: subArr[1]
          });
        });
      else {
        return;
      }
      return results;
    }
    function getStartIndexByKeyFromStartArr(startArr, key) {
      var result = 0;
      if (startArr != undefined)
        startArr.forEach(function(obj, index) {
          if (obj.key == key) {
            result = index;
            return false;
          }
        });
      return result;
    }

    //bind the click event for 'input' element
    $("#myAddrs").click(function() {
      var val=$(this).val().replace(/ /g, "-");
      var PROVINCES = [],
          startCities = [],
          startDists = [];
      //Province data，shall never change.
      addr_arr[0].forEach(function(prov) {
        PROVINCES.push({
          key: prov[0],
          val: prov[1]
        });
      });
      //init other data.
      var $input = $(this),
          dataKey = $input.attr("data-key"),
          provKey = 1, //default province 北京
          cityKey = 36, //default city 北京
          distKey = 37, //default district 北京东城区
          distStartIndex = 0, //default 0
          cityStartIndex = 0, //default 0
          provStartIndex = 0; //default 0

      if (dataKey != "" && dataKey != undefined) {
        var sArr = dataKey.split("-");
        if (sArr.length == 3) {
          provKey = sArr[0];
          cityKey = sArr[1];
          distKey = sArr[2];

        } else if (sArr.length == 2) {
          provKey = sArr[0];
          cityKey = sArr[1];
        }
        startCities = getAddrsArrayById(provKey);
        startDists = getAddrsArrayById(cityKey);
        provStartIndex = getStartIndexByKeyFromStartArr(PROVINCES, provKey);
        cityStartIndex = getStartIndexByKeyFromStartArr(startCities, cityKey);
        distStartIndex = getStartIndexByKeyFromStartArr(startDists, distKey);
      }
      var navArr = [{
        title: "省",
        id: "scs_items_prov"
      }, {
        title: "市",
        id: "scs_items_city"
      }, {
        title: "区",
        id: "scs_items_dist"
      }];
      SCS.init({
        navArr: navArr,
        onOk: function(selectedKey, selectedValue) {
          $input.val(selectedValue).attr("data-key", selectedKey);
        }
      });
      var distScroller = new SCS.scrollCascadeSelect({
        el: "#" + navArr[2].id,
        dataArr: startDists,
        startIndex: distStartIndex
      });
      var cityScroller = new SCS.scrollCascadeSelect({
        el: "#" + navArr[1].id,
        dataArr: startCities,
        startIndex: cityStartIndex,
        onChange: function(selectedItem, selectedIndex) {
          distScroller.render(getAddrsArrayById(selectedItem.key), 0); //re-render distScroller when cityScroller change
        }
      });
      var provScroller = new SCS.scrollCascadeSelect({
        el: "#" + navArr[0].id,
        dataArr: PROVINCES,
        startIndex: provStartIndex,
        onChange: function(selectedItem, selectedIndex) { //re-render both cityScroller and distScroller when provScroller change
          cityScroller.render(getAddrsArrayById(selectedItem.key), 0);
          distScroller.render(getAddrsArrayById(cityScroller.getSelectedItem().key), 0);
        }
      });
    });
  });
</script>